<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:m="http://www.ol4jsf.org"
	xmlns:a4j="http://richfaces.org/a4j">

	<style>
		.noMaskClass .rich-mpnl-mask-div {
			display:none;
		}
		.contentRights {
			width:100%;
			height:105px;
			overflow:auto;
		}
	</style>
	
	<script type="text/javascript">
		function getSelectControl() {
			var selectControl = null;
			for (var i = 0; i &lt; mapEditor.controls.length; i++)
				if (mapEditor.controls[i].id == 'parcelSelectControl') {
					selectControl = mapEditor.controls[i];
					break;
				}
			return selectControl;
		}

		function resetInputs() {
			#{rich:element('utmNorthingInput')}.value = '';
			#{rich:element('utmEastingInput')}.value = '';
			#{rich:element('parcelToSplitLabel')}.value = '';
			#{rich:element('parcelToSplitId')}.value = '';

			var selectControl = getSelectControl();
			if (selectControl != null)
				getSelectControl().unselectAll();
		}

		function resetCoordInputs() {
			#{rich:element('utmNorthingInput')}.value = '';
			#{rich:element('utmEastingInput')}.value = '';
		}

		function clearMap() {
			vlayer.destroyFeatures();
		}
		function drawBoundaryModeAux(splitBorderWKT) {
			if (splitBorderWKT == '') {
				clearMap();
			}
			else {
				var splitBorderFeature = new OpenLayers.Format.WKT().read(splitBorderWKT);
				clearMap();
				vlayer.addFeatures([splitBorderFeature]);
			}
		}
		function drawBoundaryMode() {
			var splitHelper = Seam.Component.getInstance('dataEntryHelper');
			splitHelper.getSplitBorderWKT(drawBoundaryModeAux);
			
			var selectControl = getSelectControl();
			if (selectControl != null)
				selectControl.deactivate();
		}
		function updateSplitControls() {
			var numSelected = parcelFeaturesLayer.selectedFeatures.size();
			if (numSelected == 0) {
				#{rich:element('parcelToSplitLabel')}.value = '';
				#{rich:element('parcelToSplitId')}.value = '';

				return;
			}

			if (numSelected > 1) {
				var selectControl = getSelectControl();
				if (selectControl != null) {
					while (parcelFeaturesLayer.selectedFeatures.size() > 1)
						selectControl.unselect(parcelFeaturesLayer.selectedFeatures[0]);
				}
				numSelected = parcelFeaturesLayer.selectedFeatures.size(); 
			}
			
			var parcel = parcelFeaturesLayer.selectedFeatures[0];
			#{rich:element('parcelToSplitLabel')}.value = parcel.fid;
			#{rich:element('parcelToSplitId')}.value = parcel.fid;
		}
		function selectedParcelToSplit(event) {
			updateSplitControls();
		}
		function pickSingleParcelMode() {
			var selectControl = getSelectControl();
			selectControl.activate();
			
			parcelFeaturesLayer.events.remove('featureselected');
			parcelFeaturesLayer.events.remove('featureunselected');
			parcelFeaturesLayer.events.register('featureselected', this, selectedParcelToSplit);
			parcelFeaturesLayer.events.register('featureunselected', this, selectedParcelToSplit);
		}
	</script>
	
	<rich:modalPanel id="splitPanelToolbox" width="260" height="350" resizeable="true" styleClass="noMaskClass" zindex="10000">
		<f:facet name="header">
			<h:outputText value="Division de parcela"/>
		</f:facet>
		
		<f:facet name="controls">
			<h:panelGroup>
				<h:graphicImage value="/img/close.png" styleClass="hidelink"
					id="hideSplitPanel" />
				<rich:componentControl for="splitPanelToolbox" attachTo="hideSplitPanel"
					operation="hide" event="onclick" />
			</h:panelGroup>
		</f:facet>
	
		<h:form>
			<rich:toolBar height="20" itemSeparator="grid">
				<rich:toolBarGroup>
					<a4j:commandLink action="#{dataEntryHelper.splitHelper.addPointToBoundary}" reRender="coords"
							oncomplete="resetCoordInputs(); drawBoundaryMode()"
							ajaxSingle="true" process="utmNorthingInput, utmEastingInput">
						<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
							<span style="white-space:nowrap">
								Agregar punto
							</span>
						</rich:toolTip>
						<h:graphicImage value="/img/add-icon.png" />
					</a4j:commandLink>
					<a4j:commandLink action="#{dataEntryHelper.splitHelper.deleteLastBoundaryPoint}" reRender="coords" immediate="true" oncomplete="drawBoundaryMode()">
						<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
							<span style="white-space:nowrap">
								Borrar ultimo punto
							</span>
						</rich:toolTip>
						<h:graphicImage value="/img/delete-icon.png" />
					</a4j:commandLink>
					<a4j:commandLink action="#{dataEntryHelper.splitHelper.clearBoundary}" reRender="coords" immediate="true" oncomplete="resetInputs(); clearMap();">
						<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
							<span style="white-space:nowrap">
								Borrar todo
							</span>
						</rich:toolTip>
						<h:graphicImage value="/img/delete-all-icon.png" />
					</a4j:commandLink>
				</rich:toolBarGroup>
				<rich:toolBarGroup location="right">
					<a4j:commandLink immediate="true" oncomplete="drawBoundaryMode()">
						<rich:toolTip followMouse="true" direction="bottom-left" showDelay="500" styleClass="tooltip">
							<span style="white-space:nowrap">
								Dibujar frontera
							</span>
						</rich:toolTip>
						<h:graphicImage value="/img/draw-icon.png" />
					</a4j:commandLink>
					<a4j:commandLink immediate="true" onclick="pickSingleParcelMode()">
						<rich:toolTip followMouse="true" direction="bottom-left" showDelay="500" styleClass="tooltip">
							<span style="white-space:nowrap">
								Seleccionar puntos
							</span>
						</rich:toolTip>
						<h:graphicImage value="/img/cursor-icon.png" />
					</a4j:commandLink>
				</rich:toolBarGroup>
			</rich:toolBar>
			<br />
			<table>
				<tr>
					<th>Parcela a dividir</th>
					<td>
						<h:inputText id="parcelToSplitLabel" readonly="true" value="" />
					</td>
				</tr>
			</table>
			<br />
			<h:outputText value="Ingrese las coordenadas en UTM16N" />
			<br/>
			<table>
				<tr>
					<th>NORTE:</th>
					<td>
						<h:inputText id="utmNorthingInput" value="#{dataEntryHelper.splitHelper.utmNorthing}"/>
					</td>
					<th>
						<h:outputText value="N" />
					</th>
				</tr>
				<tr>
					<th>ESTE:</th>
					<td>
						<h:inputText id="utmEastingInput" value="#{dataEntryHelper.splitHelper.utmEasting}" />
					</td>
					<th>
						<h:outputText value="E" />
					</th>
				</tr>
			</table>
			<br/>
			<div class="contentRights">
				<h:panelGroup id="coords">
					<h:panelGroup rendered="#{empty dataEntryHelper.splitHelper.currentSplitBorder}">
						<br/>
						<h:outputText value="No se han ingresado puntos de la frontera" />
					</h:panelGroup>
					<h:panelGroup rendered="#{not empty dataEntryHelper.splitHelper.currentSplitBorder}">
						<table>
							<tr>
								<th colspan="2">NORTE</th>
								<th colspan="2">ESTE</th>
							</tr>
							<ui:repeat var="coord" value="#{dataEntryHelper.splitHelper.currentSplitBorder}">
								<tr>
									<td>#{coord.y}</td>
									<th>N</th>
									<td>#{coord.x}</td>
									<th>E</th>
								</tr>
							</ui:repeat>
						</table>
					</h:panelGroup>
				</h:panelGroup>
			</div>
			<br/>
			<div align="center">
				<h:inputHidden id="parcelToSplitId" value="#{dataEntryHelper.splitHelper.parcelToSplitId}" />
				<a4j:commandButton value="Aplicar cambios" action="#{dataEntryHelper.splitHelper.applySplit}"
						reRender="requestedParcelList, coords" ajaxSingle="true"
						process="parcelToSplitId"
						oncomplete="if (#{facesContext.maximumSeverity==null}) drawParcels()">
					<f:setPropertyActionListener target="#{dataEntryHelper.requestedParcels}" value="#{null}" />
					<f:setPropertyActionListener target="#{dataEntryHelper.neighborParcels}" value="#{null}" />
				</a4j:commandButton>
			</div>
		</h:form>
	</rich:modalPanel>
</ui:component>

